import './index.scss';
import React, { useEffect, useState } from 'react';
import { Tabs, Select, Row, Col, Empty, message } from 'antd';
import copyIcon from '@/assets/icons/copyIcon.png';
import { user_order_list } from '@/utils/mixin.ts';

const DashboardOrderForm = () => {
  const [reward, setReward] = useState([]);
  const [tabVal, setTabVal] = useState('market_order');
  const [Bsc, setBsc] = useState('bsc');
  const [searchInput, setSearchInput] = useState('');
  const tabList = [
    {
      name: '即时交易订单',
      value: 'market_order',
    },
    {
      name: '挂单交易订单',
      value: 'profit_sell',
    },
    {
      name: '跟单交易订单',
      value: 'limit_buy',
    },
  ];

  useEffect(() => {
    fetchData();
  }, [tabVal, Bsc, searchInput]);

  const fetchData = async () => {
    try {
      const res = await user_order_list({
        network: Bsc,
        email: localStorage.getItem('email'),
        status: 'all',
        type: tabVal,
      });

      // Filter data based on search input
      const filteredData = searchInput
        ? res.data.filter((item) =>
            item.token_address.includes(searchInput)
          )
        : res.data;

      setReward(filteredData);
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  };

  const tabClick = (val) => {
    setTabVal(val);
  };

  const txtDis = (str) => {
    if(!str) return
    const firstFour = str.slice(0, 4);
    const lastFour = str.slice(-4);
    const maskedString = `${firstFour}****${lastFour}`;
    return maskedString;
  };

  const copyToClipboard = (text) => {
    const tempInput = document.createElement('input');
    tempInput.value = text;
    document.body.appendChild(tempInput);
    tempInput.select();
    tempInput.setSelectionRange(0, 99999);
    document.execCommand('copy');
    document.body.removeChild(tempInput);
    message.success('复制成功')
  };

  const dateTab = (dateString) => {
    const dateObject = new Date(dateString);
    const year = dateObject.getFullYear();
    const month = String(dateObject.getMonth() + 1).padStart(2, '0');
    const day = String(dateObject.getDate()).padStart(2, '0');
    const formattedDate = `${year}.${month}.${day}`;
    return formattedDate;
  };

  const tabBsc = (val) => {
    setBsc(val);
  };

  const handleSearch = () => {
    fetchData();
  };

  const clearSearch = () => {
    setSearchInput('');
  };

    return (
        <>
            <div className="orderForm">
                <Tabs
                    defaultActiveKey="1"
                    centered
                    size="small"
                    tabBarStyle={{ fontSize: '16px' }}
                    items={['交易订单'].map((item, i) => {
                        const id = String(i + 1);
                        return {
                            label: (
                                <div
                                    style={{
                                        fontSize: '1.63rem',
                                        fontWeight: '700',
                                        color: 'rgb(238,117,52)'
                                    }}>
                                    {item}
                                </div>
                            ),
                            key: id,
                            children: (
                                <div className="orderForm_content">
                                    {/* 头部切换查询 */}
                                    <Row className="orderForm_content_top">
                                        {/* tab选择 */}
                                        <Col className="top_sele" span={10}>
                                            <Col span={8} className="sele_item active">
                                                即时交易订单
                                            </Col>
                                            <Col span={8} className="sele_item">
                                                挂单交易订单
                                            </Col>
                                            <Col span={8} className="sele_item">
                                                跟单交易订单
                                            </Col>
                                        </Col>

                                        {/* 地址查询 */}
                                        <Col className="address_query" span={10}>
                                            <input type="text" className="query_input" />
                                            <div className="query_btn">地址查询</div>
                                        </Col>

                                        <Col span={4}>
                                            <Select
                                                defaultValue="全部"
                                                style={{
                                                    width: '6.25rem',
                                                    height: '2rem',
                                                    marginLeft: 37
                                                }}
                                                options={[
                                                    {
                                                        value: 'all',
                                                        label: '全部'
                                                    },
                                                    {
                                                        value: 'BNB',
                                                        label: 'BNB'
                                                    },
                                                    {
                                                        value: 'ETH',
                                                        label: 'ETH'
                                                    },
                                                    {
                                                        value: 'BOT',
                                                        label: 'BOT'
                                                    }
                                                ]}
                                            />
                                        </Col>
                                    </Row>

                                    {/* 表格 */}
                                    <Row className="table_title">
                                        <Col span={3} className="table_title_item">
                                            序号
                                        </Col>
                                        <Col span={3} className="table_title_item">
                                            币种名称
                                        </Col>
                                        <Col span={3} className="table_title_item">
                                            币种地址
                                        </Col>
                                        <Col span={3} className="table_title_item">
                                            链上查询
                                        </Col>
                                        <Col span={3} className="table_title_item">
                                            数量
                                        </Col>
                                        <Col span={3} className="table_title_item">
                                            提交时间
                                        </Col>
                                        <Col span={3} className="table_title_item">
                                            确认时间
                                        </Col>
                                        <Col span={3} className="table_title_item">
                                            成功/失败
                                        </Col>
                                    </Row>
                                    
                                    <Row className="table_content">
                                        {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((it) => {
                                            return (
                                                <>
                                                    <Row style={{ width: '100%' }}>
                                                        <Col
                                                            span={3}
                                                            className="table_content_item">
                                                            1001
                                                        </Col>
                                                        <Col
                                                            span={3}
                                                            className="table_content_item">
                                                            BNB
                                                        </Col>
                                                        <Col
                                                            span={3}
                                                            className="table_content_item">
                                                            0x12***sdfa
                                                            <img
                                                                src={copyIcon}
                                                                className="copyIcon"
                                                            />
                                                        </Col>
                                                        <Col
                                                            span={3}
                                                            className="table_content_item colorBule">
                                                            0x12***sdfa
                                                        </Col>
                                                        <Col
                                                            span={3}
                                                            className="table_content_item">
                                                            +100
                                                        </Col>
                                                        <Col
                                                            span={3}
                                                            className="table_content_item">
                                                            2023.11.23
                                                        </Col>
                                                        <Col
                                                            span={3}
                                                            className="table_content_item">
                                                            2023.11.23
                                                        </Col>
                                                        <Col
                                                            span={3}
                                                            className="table_content_item">
                                                            <div
                                                                className={
                                                                    it == 2
                                                                        ? 'item_fail_tag'
                                                                        : 'item_succeed_tag'
                                                                }>
                                                                成功
                                                            </div>
                                                        </Col>
                                                    </Row>
                                                </>
                                            );
                                        })}
                                    </Row>
                                </div>
                            )
                        };
                    })}
                />
            </div>

            <div className="iphoneOrderForm">
                <div className="iphoneOrderForm_body_tabs">
                    {
                        tabList.map(it => {
                            return  <div onClick={() => {tabClick(it.value)}} className={tabVal === it.value ? 'tabs_item active' : 'tabs_item'}>{it.name}</div>
                        })
                    }
                </div>
                <div className="iphoneOrderForm_body_table">
                    <div className="table_top">
                        <div className="table_top_left">
                        <input
                         type="text"
                        className="query_input"
                        placeholder="地址查询"
                        value={searchInput}
                        onChange={(e) => setSearchInput(e.target.value)}
                        />
                        <div className="query_btn" onClick={handleSearch}>
                        {/* 地址查询 */}
                        </div>
                        </div>
                        <div className="table_top_right">
                            <Select
                                defaultValue="bsc"
                                style={{
                                    width: '100px',
                                    height: '30px'
                                }}
                                onChange={tabBsc}
                               
                                options={[
                                    {
                                        value: 'bsc',
                                        label: 'bsc'
                                    },
                                    {
                                        value: 'eth',
                                        label: 'eth'
                                    },
                                    {
                                        value: 'polygon',
                                        label: 'polygon'
                                    }
                                ]}
                            />
                        </div>
                    </div>
                    <Row className="table_box">
                        <div className="table_title">
                            <div className="table_title_item">序号</div>
                            <div className="table_title_item">币种名称</div>
                            <div className="table_title_item">币种地址</div>
                            <div className="table_title_item">链上查询</div>
                            <div className="table_title_item">数量</div>
                            <div className="table_title_item">提交时间</div>
                            <div className="table_title_item">确认时间</div>
                        </div>
                        <div className="table_content">
                        {reward && reward.length > 0 ? reward.map((it) => {
                            return (
                                <>
                                    <div className="table_contentBox">
                                        <div className="table_content_item">{it.id}</div>
                                        <div className="table_content_item">{it.token_name}</div>
                                        <div className="table_content_item">
                                            {txtDis(it.token_address)}
                                            <img
                                            onClick={() => copyToClipboard(it.token_address)}
                                             src={copyIcon} className="copyIcon" />
                                        </div>
                                        <div className="table_content_item divorBule">
                                             {txtDis(it.txhash)}
                                        </div>
                                        <div className="table_content_item">{it.token_quantity}</div>
                                        <div className="table_content_item">{dateTab(it.create_time)}</div>
                                        <div className="table_content_item">{dateTab(it.update_time)}</div>
                                        {/* <div className="table_content_item">
                                            <div
                                                className={
                                                    it == 2 ? 'item_fail_tag' : 'item_succeed_tag'
                                                }>
                                                成功
                                            </div>
                                        </div> */}
                                    </div>
                                </>
                            );
                        }) : <Empty description={false}/>}
                        </div>
                    </Row>
                </div>
            </div>
        </>
    );
};

export default DashboardOrderForm;
